<template>
    <view>
        <!-- pages/goods_list/index.wxml -->
        <!-- 搜索框 -->
        <SearchInput></SearchInput>
        <!-- 监听自定义事件 -->
        <Tabs :tabs111="tabs" @tabsItemChange="handleTabsItemChange">
            <block v-if="tabs[0].isActive">
                <view class="goods_list">
                    <navigator class="goods_item" :url="'/pages/goods_detail/main?goods_id=' + item.goods_id" v-for="(item, index) in goodList" :key="item.goods_id">
                        <!-- 左侧 图片容器 -->

                        <!-- <view class="goods_img_wrap">
                            <image mode="widthFix" :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"></image>
                        </view> -->

                        <!-- 右侧 商品容器 -->

                        <view class="goods_info_wrap">
                            <view class="goods_name">{{ item.goods_name }}</view>
                            <view class="goods_price">￥{{ item.goods_price }}</view>
                        </view>
                    </navigator>
                </view>
            </block>
            <block v-else-if="tabs[1].isActive">1</block>
            <block v-else-if="tabs[2].isActive">2</block>
        </Tabs>
    </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput';
import Tabs from '../../components/Tabs/Tabs';
// pages/goods_list/index.js
import { request } from '../../request/index.js';
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

export default {
    components: {
        SearchInput,
        Tabs
    },
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    value: '综合',
                    isActive: true
                },
                {
                    id: 1,
                    value: '销量',
                    isActive: false
                },
                {
                    id: 2,
                    value: '价格',
                    isActive: false
                }
            ],
            goodList: [],
            listQuery: {
                query: '',
                cid: '',
                pagenum: 1,
                pagesize: 10
            },
            totalPages: 1 // 总页数
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log(options)
        this.listQuery.cid = options.cid || '';
        this.listQuery.query = options.query || '';
        this.getGoodList(); // wx.showLoading({
        //     title: '加载中',
        // })
        // setTimeout(function () {
        //     wx.hideLoading()
        // }, 2000)
    },
    /**
     * 监听用户上拉触底事件---上拉加载
     * 用户上滑页面  滚动条触底 开始加载下一页数据
     * 1.找到滚动条触底事件 微信小程序开发文档寻找
     * 2.判断还有没有下一页数据
     *   1.获取到总页数
     *   2.获取到当前的页码
     *   3.判断一下，当前的页码是否大于等于总页数
     * 3.如果没有下一页数据 弹出一个提示
     * 4.假如还有下一页数据来加载下一页数据
     */
    onReachBottom() {
        // 页面上滑 滚动条触底事件
        // console.log(e)
        console.log('页面触底了'); // 判断还有没有下一页数据

        if (this.listQuery.pagenum >= this.totalPages) {
            // 没有下一页数据
            // console.log('没有下一页数据')
            uni.showToast({
                title: '没有下一页数据1',
                icon: 'none',
                image: '',
                duration: 1500,
                mask: false,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
        } else {
            // 还有下一页数据
            // console.log('有下一页数据')
            this.listQuery.pagenum++; // 页码 +1

            this.getGoodList(); // 重新请求数据
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作（也就是下拉刷新）
     * 开始页面的下拉刷新
     */
    onPullDownRefresh: function () {
        // console.log(1)
        this.setData({
            goodList: [] // 1.重置数组
        });
        this.listQuery.pagenum = 1; // 2.重置页码

        this.getGoodList(); // 3.重新发送请求
    },
    // /**
    //  * 页面上拉触底事件的处理函数
    //  */
    // onReachBottom: function () {
    // },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        /**
         * 获取商品列表数据
         */
        async getGoodList() {
            const res = await request({
                url: '/goods/search',
                data: this.listQuery
            });
            console.log(res); // 获取总条数

            const total = res.total; // 计算总页数

            this.totalPages = Math.ceil(total / this.listQuery.pagesize);
            console.log(this.totalPages); // this.setData({
            //     goodList: res.goods
            // })
            // 加载下一页数据 先解构旧数据  再拼接新数组！！！重要！！！

            this.setData({
                goodList: [...this.goodList, ...res.goods]
            }); // console.log(this.data.goodList)
            // 关闭当前页面下拉刷新 即使初始化的时候没有调用下拉刷新的窗口,直接关闭也不会报错

            uni.stopPullDownRefresh();
        },

        /**
         * 标题的点击事件 从子组件传递过来的
         */
        handleTabsItemChange(e) {
            console.log(e);
            const index = e.detail;
            let tabs = JSON.parse(JSON.stringify(this.tabs));
            tabs.forEach((item, index_tabs) => {
                if (index_tabs === index) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            }); // 重新赋值

            this.setData({
                tabs
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
